<template>
  <ul class="todo-main">
   <Item v-for="(todo, index) in todos" :key="todo.id" 
      :todo="todo" :deleteTodo="deleteTodo" :toggleTodo="toggleTodo"/>
  </ul>
</template>

<script lang="ts" setup>
  import type { Todo, Todos } from '../types';
  import Item from './Item.vue'
  // 简单的定义
  // defineProps(['todos', 'deleteTodo', 'toggleTodo'])

  interface Props {
    todos: Todos;
    deleteTodo (id: number): void
    toggleTodo (todo: Todo): void
  }
  defineProps<Props>()

</script>

<style scoped>
  .todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }

  .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
  } 
</style>
